import { memo } from "react" ;
import {
  ThemeHeaderWrapped
} from "./style";
import PropTypes from "prop-types";
function HThemeHeader (props) {
  const { title , keywords = [] } = props;
  return (
    <ThemeHeaderWrapped>
      <div className="left">
        <a className={"theme-title"}>{title}</a>
        <div className={"keyword"}>
          {
            keywords.map((item,index)=>{
              return (
                <div className={"item"} key={item}>
                  {index !== 0 ? <span>|</span>:""}
                  <a href="#">{item}</a>
                </div>
              )
            })
          }
        </div>
      </div>
      <span className="right">
          <a href="#">更多</a>
          <i className={"icon sprite_02"}>&nbsp;</i>
        </span>
    </ThemeHeaderWrapped>
  )
}
HThemeHeader.propTypes = {
  title:PropTypes.string.isRequired,
  keywords: PropTypes.array
}
export default memo(HThemeHeader);
